<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
    <title>分期贷-计算工具</title>
    <link rel="stylesheet" href="farme/bootstrap-3.3.4/css/bootstrap.min.css">
    <link rel="stylesheet" href="farme/Font-Awesome-3.2.1/css/font-awesome.min.css">
    <link rel="stylesheet" href="css/wx.min.css">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="mobileframe">
                <div class="wx-group">
                    <div class="wx-title"></div>
                    <ul class="wx-settings">
                        <li class="wx-item">
                            <span class="wx-content">分期贷款计算器</span>
                            <div class="wx-name">名称</div>
                        </li>
                        <li class="wx-item">
                            <span class="wx-content">v0.2.0</span>
                            <div class="wx-name">版本</div>
                        </li>
                        <li class="wx-item">
                            <span class="wx-content">cnjack</span>
                            <div class="wx-name">作者</div>
                        </li>
                    </ul>
                </div>
                <div class="wx-group">
                    <div class="wx-title"></div>
                    <ul class="wx-settings">
                        <li class="wx-item">
                            <span class="wx-content"><input id="totle" type="tel"></span>
                            <div class="wx-name">总金额</div>
                        </li>
                        <li class="wx-item">
                            <span class="wx-content">
                                <select id="gid" class="form-control">
                                </select>
                            </span>
                            <div class="wx-name">行业</div>
                        </li>
                        <li class="wx-item">
                            <span class="wx-content">
                                <select id="periods" class="form-control">
                                </select>
                            </span>
                            <div class="wx-name">总金额</div>
                        </li>
                        <li class="wx-item">
                            <span class="wx-content">
                                <button id="count" class="btn btn-default" type="button">计算</button>
                            </span>
                            <div class="wx-name"></div>
                        </li>
                        
                    </ul>
                </div>
                <div class="wx-group">
                    <div class="wx-title"></div>
                    <ul class="wx-settings">
                        <li class="wx-item">
                            <span class="wx-content" id="pay-pre"></span>
                            <div class="wx-name">每期还款</div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="farme/zepto-1.1.6/zepto.min.js"></script>
    <script type="text/javascript">
        var rate = {}
        var group = {}
        function loadpublic(){
            $.ajax({
                url : "http://s.360fqd.com/Public/product",
                type: 'GET',
                dataType: 'json',
                async : true,
                success : function(data){
                    group = data.group
                    rate = data.rate
                    for(i in group){
                        $('#gid').append("<option value=\""+group[i].gid+"\">"+group[i].gname+"</option>")
                    }
                    loadrate()
                }
            })
        }
        function loadrate() {
            var gid = parseInt($("#gid").val())
            $('#periods').html("")
            for(i in rate){
                if(rate[i].gid == gid)
                $('#periods').append("<option value=\""+rate[i].period+"\">"+rate[i].period+"期</option>")
            }
        }
        function getRate(gid, periods){
            for(i in rate){
                if(rate[i].gid == gid){
                    if(rate[i].period == periods)
                        return rate[i].rate
                }
            }
        }
	    function count() {
			var totle = parseInt($("#totle").val())
			if(isNaN(totle))
				totle = 0
    		var periods = parseInt($("#periods").val())
			var periods_arr = [3, 6, 9, 12]
			if(periods_arr.indexOf(periods) == -1)
				return false;
    		var gid = parseInt($("#gid").val())
    		var rate = getRate(gid, periods)
    		var pay_totle = (1 + periods*rate)*totle
    		var pay_totle_i = pay_totle - totle
    		var pay_pre = pay_totle/periods
    		$("#pay-pre").text(changeTwoDecimal_f(pay_pre))
		}
		changeTwoDecimal_f= function (floatvar){
			var f_x = parseFloat(floatvar);
			if (isNaN(f_x)) {
				alert('function:changeTwoDecimal->parameter error');
				return false;
			}
			var f_x = Math.round(f_x*100)/100;
			var s_x = f_x.toString();
			var pos_decimal = s_x.indexOf('.');
			if (pos_decimal < 0){
				pos_decimal = s_x.length;
				s_x += '.';
			}
			while (s_x.length <= pos_decimal + 2) {
				s_x += '0';
			}
			return s_x;
		}
    	$(document).ready(function() {
            loadpublic()
            $("#gid").change(function() {
                loadrate()
            })
    		$("#count").click(function() {
    			count()
    		})
    		
    	})
    </script>
</body>
</html>